<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>学生管理系统</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">学生管理系统</div>

        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img
                src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                class="layui-nav-img"
              />
              张三
            </a>
          </li>
          <li class="layui-nav-item"><a href="">登出</a></li>
        </ul>
      </div>

      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
          <ul class="layui-nav layui-nav-tree" lay-filter="studentNav">
            <li class="layui-nav-item">
              <a href="#student">学生管理</a>
            </li>
            <li class="layui-nav-item">
              <a href="#class">班级管理</a>
            </li>
            <li class="layui-nav-item">
              <a href="#course">课程管理</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="layui-body">
        <!-- 内容主体区域 -->
        <div id="content" style="padding: 15px; margin-top: 60px"></div>
      </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
      //JavaScript代码区域
      layui.define(function () {
        let $ = layui.$;
        var element = layui.element;
        element.on("nav(studentNav)", function (ele) {
          let path = ele.attr("href").substring(1);
          $("#content").load(`/${path}.html`);
        });
      });
    </script>
  </body>
</html>
